import { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from "react";
import collectService from "@/api/services/mes/collectService";
import { TableToolbar } from "@/components/grid/TableToolbar";
import { Button, Input, InputNumber, Space } from "antd";
import Table, { type ColumnsType } from "antd/es/table";
import { toast } from "sonner";
import type { MesStationCollectDetail } from "./entity";

interface MesStationCollectDetailProps {
    parentId?: React.Key;
}

export interface MesStationCollectDetailHandles {
    getAddList: () => MesStationCollectDetail[];
    getUpdateList: () => MesStationCollectDetail[];
    getDeleteIds: () => React.Key[];
}

const MesStationCollectDetailPage = forwardRef<MesStationCollectDetailHandles, MesStationCollectDetailProps>(({ parentId }, ref) => {
    const [loading, setLoading] = useState(false);
    const [list, setList] = useState<MesStationCollectDetail[]>([]);
    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
    const [editedRowKey, setEditedRowKey] = useState<React.Key>();
    // 添加一个状态来跟踪临时ID
    const [tempIds, setTempIds] = useState<React.Key[]>([]);
    const [addList, setAddList] = useState<MesStationCollectDetail[]>([]);
    const [updateList, setUpdateList] = useState<MesStationCollectDetail[]>([]);
    const [deleteIds, setDeleteIds] = useState<React.Key[]>([]);

    useImperativeHandle(
        ref,
        () => ({
        getAddList: () => addList,
        getUpdateList: () => updateList,
        getDeleteIds: () => deleteIds,
    }),[addList, updateList, deleteIds]);

    useEffect(() => {
        const newAddList = list.filter((item) => item.id && tempIds.includes(item.id));
        setAddList(newAddList);
        const updateList = list.filter((item) => item.id && !tempIds.includes(item.id));
        setUpdateList(updateList);
    }, [list]);

    const [tableSize, setTableSize] = useState<"large" | "middle" | "small">("middle");

    //动态设置表格高度
    const [tableScrollY, setTableScrollY] = useState(0);
    const PAGE_OFFSET_HEIGHT = 403;
    const updateTableHeight = () => {
        const newHeight = window.innerHeight - PAGE_OFFSET_HEIGHT;
        setTableScrollY(newHeight > 200 ? newHeight : 200); // 保证最小高度
    };

    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
    useEffect(() => {
        updateTableHeight(); // 初始化
        window.addEventListener("resize", updateTableHeight);
        return () => window.removeEventListener("resize", updateTableHeight);
    }, []);


    //表格列定义
    const columns: ColumnsType<MesStationCollectDetail> = [
        {
            title: "关联主表ID",
            width: 120,
            key: "collectId",
            dataIndex: "collectId",
            render: (text, record) => (
                <InputNumber value={text}  onChange={(value) => handleFieldChange(record.id, "collectId", value)}  style={{ width: '100%' }}/>
            )
        },
        {
            title: "参数编码",
            width: 120,
            key: "paramCode",
            dataIndex: "paramCode",
            render: (text, record) => (
                <Input value={text} onChange={(e) => handleFieldChange(record.id, "paramCode", e.target.value)} allowClear/>
            )
        },
        {
            title: "参数名称",
            width: 120,
            key: "paramName",
            dataIndex: "paramName",
            render: (text, record) => (
                <Input value={text} onChange={(e) => handleFieldChange(record.id, "paramName", e.target.value)} allowClear/>
            )
        },
        {
            title: "参数值",
            width: 120,
            key: "paramValue",
            dataIndex: "paramValue",
            render: (text, record) => (
                <Input value={text} onChange={(e) => handleFieldChange(record.id, "paramValue", e.target.value)} allowClear/>
            )
        },
        {
            title: "单位",
            width: 120,
            key: "unit",
            dataIndex: "unit",
            render: (text, record) => (
                <Input value={text} onChange={(e) => handleFieldChange(record.id, "unit", e.target.value)} allowClear/>
            )
        },
    ];

    const [selectedValues, setSelectedValues] = useState<string[]>(() =>
        columns.filter((col) => col.key !== "operation").map((col) => (col.key ? String(col.key) : "")),
    );

    // 处理字段变更
    const handleFieldChange = (id: string, field: string, value: any) => {
        let inputValue: any = null;
        // 如果是checkbox的值，将布尔值转换为数字值（true为1，false为0）
        if (typeof value === "boolean") {
            inputValue = value ? 1 : 0;
        } else if (value instanceof Date) {
            // 处理日期格式
            inputValue = dayjs(value).format('YYYY-MM-DD')
        } else {
            inputValue = value;
        }

        setList((prevData) => prevData.map((item) => (item.id === id ? { ...item, [field]: inputValue } : item)));
    }

    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
    const filteredColumns = useMemo(() => {
        return [...columns.filter((col) => selectedValues.includes(String(col.key)) || col.key === "operation")].sort(
            (a, b) => {
                const originalIndex = columns.findIndex((c) => c.key === a.key);
                const targetIndex = columns.findIndex((c) => c.key === b.key);
                return originalIndex - targetIndex;
            },
        );
    }, [selectedValues]);

            //加载表格数据
    const fetchList = () => {
        if (!parentId) return;

        setLoading(true);
        collectService.getdetails(parentId).then((res) => {
            setList(res);
        }).catch((error) => {
            console.log(error);
            toast.error("获取数据失败！", error);
        }).finally(() => {
            setLoading(false);
        });
    };

    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
    useEffect(() => {
      if (parentId)	{
        fetchList();
      } else {
        // 初始化时清空状态
        setList([]);
        setSelectedRowKeys([]);
        setTempIds([]);
        setAddList([]);
        setUpdateList([]);
        setDeleteIds([]);
      }
    }, [parentId]);

    //检验是否输入值
    const validatePartsBeforeAdd = (): boolean => {
        for (const detail of list) {
            if (!detail.collectId) {
                toast.error("关联主表ID");
                return false;
            }
            if (!detail.paramCode) {
                toast.error("参数编码");
                return false;
            }
            if (!detail.paramName) {
                toast.error("参数名称");
                return false;
            }
            if (!detail.paramValue) {
                toast.error("参数值");
                return false;
            }
            if (!detail.unit) {
                toast.error("单位");
                return false;
            }
        }
        return true;
    };

    const handleAdd = () => {
        if (!validatePartsBeforeAdd()) {
        return; // 校验未通过，不执行新增
        }

        const newId = Date.now().toString();
        const newDetail: MesStationCollectDetail = {
            id: newId,
            collectId: parentId,
        };

        // 添加到临时ID列表
        setTempIds(prev => [...prev, newId]);
        setList(prev => [...prev, newDetail]);
    };

        // 在删除方法中修改判断逻辑
        const handleDelete = () => {
            // 如果没有选中行，直接返回
            if (selectedRowKeys.length === 0) {
                return;
            }

            // 更新删除ID列表
            const newDeleteIds = [...deleteIds];

            // 将已有ID但不在deleteIds中的ID添加到deleteIds
            for (const key of selectedRowKeys) {
                const item = list.find(item => item.id === key);
                if (item?.id && !tempIds.includes(item.id)) {
                    // 如果不在临时ID列表中，则添加到删除列表
                    if (!newDeleteIds.includes(item.id)) {
                        newDeleteIds.push(item.id);
                    }
                }
            };

            // 更新deleteIds状态
            setDeleteIds(newDeleteIds);

            // 从列表中移除选中的行
            setList(prevList => prevList.filter(item => !selectedRowKeys.includes(item.id)));
            // 从tempIds中移除被删除的临时ID
            setTempIds(prevTempIds => prevTempIds.filter(id => !selectedRowKeys.includes(id)));
            // 清空选中状态
            setSelectedRowKeys([]);
        };

        return (
            <>
                <div className="flex justify-between mb-4">
                    <div className="flex gap-2">
                        <Button type="primary" onClick={handleAdd}>
                            新增
                        </Button>
                        <Button danger disabled={selectedRowKeys.length === 0} onClick={handleDelete}>
                        删除
                        </Button>
                    </div>
                    <TableToolbar
                        onRefresh={() => fetchList()}
                        onSizeChange={setTableSize}
                        columns={columns}
                        selectedValues={selectedValues}
                        onColumnChange={setSelectedValues}
                    />
                </div>
                <Table
                    rowKey="id"
                    size={tableSize}
                    scroll={{ x: "max-content", y: tableScrollY }}
                    loading={loading}
                    pagination={false}
                    columns={filteredColumns}
                    dataSource={list}
                    rowSelection={{
                        type: "checkbox",
                        selectedRowKeys: selectedRowKeys,
                        onChange: (selectedKeys) => {
                            setSelectedRowKeys(selectedKeys as React.Key[]);
                        },
                    }}
                />

            </>
        );
});

export default MesStationCollectDetailPage;